<template>
  <div class="page">
    <el-tabs v-model="tabValue" type="card">
      <el-tab-pane v-for="(item, index) in editableTabs" :key="index" :label="item.title" :name="item.value">
        {{ item.name }}
      </el-tab-pane>
    </el-tabs>
    <div class="content w-1400">
      <div class="query-box">
        <span class="query-category">{{ selCategory.title }}</span><span>
          <span class="query-total">(共<span class="total">{{ goodsNum }}</span>件相关商品)</span>
        </span>
        <span class="query-area" v-if="queryData.cat_id && queryData.cat_id !== ''">类目：<span class="area">{{
          selectTypeObj.title }}</span>
          <i class="el-icon-close close-img" @click="deleteCat"></i>
        </span>
        <span class="query-area" v-if="queryData.province && queryData.province !== ''">地区：<span class="area">{{
          queryData.province }}{{ queryData.city }}{{ queryData.district }}</span>
          <i class="el-icon-close close-img" @click="deleteArea"></i>
        </span>
        <el-button class="reset-btn" @click="resetFunc">重置</el-button>
      </div>
      <div class="table-box">
        <table class="cust-table w-1400">
          <tr class="row  w-1400">
            <td class="title">类目：</td>
            <td class="sel-content">
              <div class="category-list" :class="{ 'close': closeCategory }">
                <span v-for="(item, index) in categoryList" @click="selCategoryFn(item)" :key="index"
                  class="category-item" :class="{ 'sel-item': item.title == selCategory.title }">
                  {{ item.title }}
                </span>
              </div>
              <div class="collapse" @click="openCategory()">
                <span class="tips">{{ closeCategory ? '展开' : '关闭' }}</span>
                <i class="el-icon-arrow-down down-arrow" :class="{ 'rotate180': !closeCategory }"></i>
              </div>
            </td>
          </tr>
          <tr class="row w-1400">
            <td class="title">地区：</td>
            <td>
              <div class="sel-content">
                <div class="category-list" :class="{ 'close': closeArea }">
                  <div v-for="(item, index) in areaList" @click="selAreaFn(item)" :key="item.value"
                    class="category-item"
                    :class="{ 'sel-item': item.value === (queryData.province ? queryData.province : '') }">
                    {{ item.label }}
                  </div>
                </div>
                <div class="collapse" @click="openArea()">
                  <span class="tips">{{ closeArea ? '展开' : '关闭' }}</span>
                  <i class="el-icon-arrow-down down-arrow" :class="{ 'rotate180': !closeArea }"></i>
                </div>
              </div>
              <div class="sel-content sub-sel" v-if="subAreaList.length > 0">
                <div class="category-list">
                  <span v-for="(item, index) in subAreaList" @click="selSubAreaFn(item)" :key="item.value"
                    class="category-item" :class="{ 'sel-item': item.value == queryData.city }">
                    {{ item.label }}
                  </span>
                </div>
              </div>
              <div class="sel-content sub-sel" v-if="districtList.length > 0">
                <div class="category-list">
                  <span v-for="(item, index) in districtList" @click="districtClickFunc(item)" :key="item.value"
                    class="category-item" :class="{ 'sel-item': item.value == queryData.district }">
                    {{ item.label }}
                  </span>
                </div>
              </div>
            </td>
          </tr>
          <tr class="row w-1400" v-if="queryData.cat_id == 17 || queryData.cat_id == 18 || queryData.cat_id==19">
            <td class="title">实体市场：</td>
            <td>
              <div class="sel-content">
                <div class="category-list" :class="{ 'close': closeArea }">
                  <div  @click="selCategoryFn({id: 17})" 
                    class="category-item"
                    :class="{ 'sel-item': 17 == (queryData.cat_id ? queryData.cat_id : '') }">
                    苗木花鸟市场
                  </div>
                  <div  @click="selCategoryFn({id: 18})" 
                    class="category-item"
                    :class="{ 'sel-item': 18 == (queryData.cat_id ? queryData.cat_id : '') }">
                    建材市场
                  </div>
                  <div  @click="selCategoryFn({id: 19})" 
                    class="category-item"
                    :class="{ 'sel-item': 19 == (queryData.cat_id ? queryData.cat_id : '') }">
                    家具加店市场
                  </div>
                </div>
                <!-- <div class="collapse" @click="openArea()">
                  <span class="tips">{{ closeArea ? '展开' : '关闭' }}</span>
                  <i class="el-icon-arrow-down down-arrow" :class="{ 'rotate180': !closeArea }"></i>
                </div> -->
              </div>
            </td>
          </tr>
        </table>
      </div>
      <div class="table-box">
        <table class="cust-table w-1400">
          <tr class="row  w-1400">
            <td class="title1">综合排序</td>
            <td class="sel-content1">
              <el-checkbox-group v-model="checkList" class="check-group" @change="changeGroup">
                <el-checkbox label="会员单位"></el-checkbox>
                <el-checkbox label="实力供应商"></el-checkbox>
                <el-checkbox label="已核验企业"></el-checkbox>
              </el-checkbox-group>
            </td>
          </tr>

        </table>
      </div>

      <companyInfoList ref="companyInfoList" v-if="tabValue == '1'" :queryData="queryData" :cat_id="selCategory.id"
        @updateCount="updateCountFunc"></companyInfoList>
      <company v-if="tabValue == '2'" ref="company" :queryData="queryData"></company>

    </div>
  </div>
</template>
<script>

import companyInfoList from './components/companyInfoList.vue';
import company from './components/company.vue';
const { _sheng, _shi, _qu } = require('../company/city.data');

export default {
  name: "goodsAndServices",
  components: {
    companyInfoList,
    company
  },
  data() {
    return {
      closeArea: true,
      closeCategory: true,
      page: {
        size: 10,
        page: 1,
        totalCount: 100,
        pageCount: 10
      },
      checkList: [],
      subAreaList: [],
      areaList: [],
      categoryList: [],
      allCategoryList: [],
      selTable: [],
      selCategory: {},
      selArea: '',
      selSubArea: '',
      goodsNum: 0,
      tabValue: 0,
      editableTabs: [{
        title: '商品和服务',
        value: '1',
      },
      {
        title: '供应商单位',
        value: '2',
      }],
      queryData: {
        province: '',
        city: '',
        district: '',
        cat_id: '',
      },
      treeData: [],
      districtList: [],
      popularIndustries: {},
      selectTypeObj: {},
    };
  },
  computed: {

  },
  watch: {
    '$route.query': {
      handler(newQuery, oldQuery) {
        this.queryData.cat_id = newQuery.cat_id;
        this.queryData.province = '';
        this.queryData.city = '';
        this.queryData.district = '';
        this.districtList = [];
        this.subAreaList = [];
        this.selCategory = {};
        this.checkList = [];
        this.queryData.is_vip = '';
        this.queryData.is_strength = '';
        this.queryData.is_verify = '';
        if (this.tabValue == '1') {
          this.$refs['companyInfoList'].getProductList({
            cat_id: this.queryData.cat_id ? this.queryData.cat_id : undefined,
            is_vip: this.queryData.is_vip ? this.queryData.is_vip : undefined,
            is_strength: this.queryData.is_strength ? this.queryData.is_strength : undefined,
            is_verify: this.queryData.is_verify ? this.queryData.is_verify : undefined,
            province: this.queryData.province ? this.queryData.province : undefined,
            city: this.queryData.city ? this.queryData.city : undefined,
            district: this.queryData.district ? this.queryData.district : undefined,
          })
        } else {
          this.$refs['company'].getCompanyList({
            cat_id: this.queryData.cat_id ? this.queryData.cat_id : undefined,
            is_vip: this.queryData.is_vip ? this.queryData.is_vip : undefined,
            is_strength: this.queryData.is_strength ? this.queryData.is_strength : undefined,
            is_verify: this.queryData.is_verify ? this.queryData.is_verify : undefined,
            province: this.queryData.province ? this.queryData.province : undefined,
            city: this.queryData.city ? this.queryData.city : undefined,
            district: this.queryData.district ? this.queryData.district : undefined,
          })
        }

      },
      immediate: true,
      deep: true
    }
  },
  created() {
    this.initData()
    this.getCatData();
    this.treeData = this.buildTree(_sheng, _shi, _qu);
    this.treeData.unshift({
      value: '',
      label: '全部',
      children: [],
    })
    console.log(this.treeData, 'treeDatatreeDatatreeData')
    this.areaList = [];
    for (let i = 0; i < 13; i++) {
      this.areaList.push(this.treeData[i])
    }
    this.handleSelect();
  },
  methods: {
    resetFunc() {
      this.queryData.province = '';
      this.queryData.city = '';
      this.queryData.district = '';
      this.districtList = [];
      this.subAreaList = [];
      this.queryData.cat_id = '';
      this.selCategory = {};
      this.checkList = [];
      this.queryData.is_vip = '';
      this.queryData.is_strength = '';
      this.queryData.is_verify = '';
      if (this.tabValue == '1') {
        this.$refs['companyInfoList'].getProductList({
          cat_id: this.queryData.cat_id ? this.queryData.cat_id : undefined,
          is_vip: this.queryData.is_vip ? this.queryData.is_vip : undefined,
          is_strength: this.queryData.is_strength ? this.queryData.is_strength : undefined,
          is_verify: this.queryData.is_verify ? this.queryData.is_verify : undefined,
          province: this.queryData.province ? this.queryData.province : undefined,
          city: this.queryData.city ? this.queryData.city : undefined,
          district: this.queryData.district ? this.queryData.district : undefined,
        })
      } else {
        this.$refs['company'].getCompanyList({
          cat_id: this.queryData.cat_id ? this.queryData.cat_id : undefined,
          is_vip: this.queryData.is_vip ? this.queryData.is_vip : undefined,
          is_strength: this.queryData.is_strength ? this.queryData.is_strength : undefined,
          is_verify: this.queryData.is_verify ? this.queryData.is_verify : undefined,
          province: this.queryData.province ? this.queryData.province : undefined,
          city: this.queryData.city ? this.queryData.city : undefined,
          district: this.queryData.district ? this.queryData.district : undefined,
        })
      }
    },
    deleteArea() {
      this.queryData.province = '';
      this.queryData.city = '';
      this.queryData.district = '';
      this.districtList = [];
      this.subAreaList = [];
      if (this.tabValue == '1') {
        this.$refs['companyInfoList'].getProductList({
          cat_id: this.queryData.cat_id ? this.queryData.cat_id : undefined,
          is_vip: this.queryData.is_vip ? this.queryData.is_vip : undefined,
          is_strength: this.queryData.is_strength ? this.queryData.is_strength : undefined,
          is_verify: this.queryData.is_verify ? this.queryData.is_verify : undefined,
          province: this.queryData.province ? this.queryData.province : undefined,
          city: this.queryData.city ? this.queryData.city : undefined,
          district: this.queryData.district ? this.queryData.district : undefined,
        })
      } else {
        this.$refs['company'].getCompanyList({
          cat_id: this.queryData.cat_id ? this.queryData.cat_id : undefined,
          is_vip: this.queryData.is_vip ? this.queryData.is_vip : undefined,
          is_strength: this.queryData.is_strength ? this.queryData.is_strength : undefined,
          is_verify: this.queryData.is_verify ? this.queryData.is_verify : undefined,
          province: this.queryData.province ? this.queryData.province : undefined,
          city: this.queryData.city ? this.queryData.city : undefined,
          district: this.queryData.district ? this.queryData.district : undefined,
        })
      }
    },
    deleteCat() {
      this.queryData.cat_id = '';
      this.selCategory = {};
      if (this.tabValue == '1') {
        this.$refs['companyInfoList'].getProductList({
          cat_id: this.queryData.cat_id ? this.queryData.cat_id : undefined,
          is_vip: this.queryData.is_vip ? this.queryData.is_vip : undefined,
          is_strength: this.queryData.is_strength ? this.queryData.is_strength : undefined,
          is_verify: this.queryData.is_verify ? this.queryData.is_verify : undefined,
          province: this.queryData.province ? this.queryData.province : undefined,
          city: this.queryData.city ? this.queryData.city : undefined,
          district: this.queryData.district ? this.queryData.district : undefined,
        })
      } else {
        this.$refs['company'].getCompanyList({
          cat_id: this.queryData.cat_id ? this.queryData.cat_id : undefined,
          is_vip: this.queryData.is_vip ? this.queryData.is_vip : undefined,
          is_strength: this.queryData.is_strength ? this.queryData.is_strength : undefined,
          is_verify: this.queryData.is_verify ? this.queryData.is_verify : undefined,
          province: this.queryData.province ? this.queryData.province : undefined,
          city: this.queryData.city ? this.queryData.city : undefined,
          district: this.queryData.district ? this.queryData.district : undefined,
        })
      }
    },
    findCategoryById(tree, cat_id) {
      for (let node of tree) {
        if (node.id == cat_id) {
          return node;
        }
        if (node.children && node.children.length > 0) {
          const result = this.findCategoryById(node.children, cat_id);
          if (result) {
            return result;
          }
        }
      }
      return null;
    },
    handleSelect() {
      this.$httpApi("/api/getProductCat", {
        parent_id: 0,
        is_tree: 1,
      },
        "get"
      )
        .then((res) => {
          this.popularIndustries = res.data;
          this.selectTypeObj = this.findCategoryById(this.popularIndustries, this.$route.query.cat_id);
          console.log(ret, 'retretret')
        });
    },
    buildTree(sheng, shi, qu) {
      let tree = sheng.map(province => {
        let cities = shi.filter(city => city.sheng_code === province.sheng_code).map(city => {
          let districts = qu.filter(district => district.shi_code === city.shi_code).map(district => {
            return {
              ...district,
              value: district.qu_name,
              label: district.qu_name
            };
          });
          return {
            ...city,
            value: city.shi_name,
            label: city.shi_name,
            children: districts
          };
        });
        return {
          ...province,
          value: province.sheng_name,
          label: province.sheng_name,
          children: cities
        };
      });
      return tree;
    },
    changeGroup(val) {

      if (val.indexOf('会员单位') > -1) {
        this.queryData.is_vip = 1;
      }
      if (val.indexOf('实力供应商') > -1) {
        this.queryData.is_strength = 1;
      }
      if (val.indexOf('已核验企业') > -1) {
        this.queryData.is_verify = 1;
      }
      if (this.tabValue == '1') {
        this.$refs['companyInfoList'].getProductList({
          cat_id: this.queryData.cat_id,
          is_vip: this.queryData.is_vip ? this.queryData.is_vip : undefined,
          is_strength: this.queryData.is_strength ? this.queryData.is_strength : undefined,
          is_verify: this.queryData.is_verify ? this.queryData.is_verify : undefined,
          province: this.queryData.province ? this.queryData.province : undefined,
          city: this.queryData.city ? this.queryData.city : undefined,
          district: this.queryData.district ? this.queryData.district : undefined,
        })
      } else {
        this.$refs['company'].getCompanyList({
          cat_id: this.queryData.cat_id,
          is_vip: this.queryData.is_vip ? this.queryData.is_vip : undefined,
          is_strength: this.queryData.is_strength ? this.queryData.is_strength : undefined,
          is_verify: this.queryData.is_verify ? this.queryData.is_verify : undefined,
          province: this.queryData.province ? this.queryData.province : undefined,
          city: this.queryData.city ? this.queryData.city : undefined,
          district: this.queryData.district ? this.queryData.district : undefined,
        })
      }
    },
    updateCountFunc(val) {
      this.goodsNum = val;
    },
    openCategory() {
      this.closeCategory = !this.closeCategory;
      if (this.closeCategory) {
        this.categoryList = this.allCategoryList;
      } else {
        this.categoryList = [];
        for (let i = 0; i < this.allCategoryList.length && i < 15; i++) {
          this.categoryList.push(this.allCategoryList[i])
        }
      }

    },
    selCategoryFn(item) {
      this.selCategory = item;
      this.queryData = {
        cat_id: this.selCategory.id
      }
      this.selectTypeObj = this.findCategoryById(this.popularIndustries, this.selCategory.id);
    },
    getCatData() {
      this.$httpApi("/api/getProductCat", {
        parent_id: this.$route.query.cat_id,
      },
        "get"
      )
        .then((res) => {
          this.allCategoryList = res.data;
          this.allCategoryList.unshift({
            id: this.$route.query.cat_id,
            title: '全部'
          })
          this.categoryList = [];
          for (let i = 0; i < this.allCategoryList.length && i < 15; i++) {
            this.categoryList.push(this.allCategoryList[i])
          }
          this.selCategory = this.categoryList[0]
          this.queryData = {
            cat_id: this.selCategory.id
          }
          this.tabValue = '1'
        });
    },
    initData() {
      this.closeArea = true;
      this.closeCategory = true;
      // this.selCategory = '全部'
      //this.goodsNum = '1449'
      this.selArea = '保定'
      this.selSubArea = '易县'
      // let categoryList = ['全部', '钢筋连接套筒']
      // for (let i = 0; i < 15; i++) {
      //   categoryList.push('类目名称')
      // }
      // this.categoryList = categoryList

      // this.areaList = ['全部', '保定', '天津', '杭州', '苏州', '合肥', '吉林', '济南', '吉林', '天津', '杭州', '全部', '天津', '杭州']
      // this.subAreaList = ['不限', '莲池', '竞秀', '涿州', '白沟', '徐水', '清苑', '易县', '竞秀', '涿州', '白沟', '徐水', '清苑', '济南',]
    },

    selAreaFn(item) {
      this.queryData.province = item.value;
      this.queryData.city = '';
      this.queryData.district = '';
      this.subAreaList = item.children;
      this.districtList = [];
      if (this.tabValue == '1') {
        this.$refs['companyInfoList'].getProductList({
          cat_id: this.queryData.cat_id,
          is_vip: this.queryData.is_vip ? this.queryData.is_vip : undefined,
          is_strength: this.queryData.is_strength ? this.queryData.is_strength : undefined,
          is_verify: this.queryData.is_verify ? this.queryData.is_verify : undefined,
          province: this.queryData.province,
        })
      } else {
        this.$refs['company'].getCompanyList({
          cat_id: this.queryData.cat_id,
          is_vip: this.queryData.is_vip ? this.queryData.is_vip : undefined,
          is_strength: this.queryData.is_strength ? this.queryData.is_strength : undefined,
          is_verify: this.queryData.is_verify ? this.queryData.is_verify : undefined,
          province: this.queryData.province,
        })
      }

    },
    selSubAreaFn(item) {
      this.queryData.city = item.value;
      this.queryData.district = '';
      this.districtList = item.children;
      if (this.tabValue == '1') {
        this.$refs['companyInfoList'].getProductList({
          cat_id: this.queryData.cat_id,
          is_vip: this.queryData.is_vip ? this.queryData.is_vip : undefined,
          is_strength: this.queryData.is_strength ? this.queryData.is_strength : undefined,
          is_verify: this.queryData.is_verify ? this.queryData.is_verify : undefined,
          province: this.queryData.province,
          city: this.queryData.city,
        })
      } else {
        this.$refs['company'].getCompanyList({
          cat_id: this.queryData.cat_id,
          is_vip: this.queryData.is_vip ? this.queryData.is_vip : undefined,
          is_strength: this.queryData.is_strength ? this.queryData.is_strength : undefined,
          is_verify: this.queryData.is_verify ? this.queryData.is_verify : undefined,
          province: this.queryData.province,
          city: this.queryData.city,
        })
      }
    },
    districtClickFunc(item) {
      this.queryData.district = item.value;
      this.$forceUpdate()
      if (this.tabValue == '1') {
        this.$refs['companyInfoList'].getProductList({
          cat_id: this.queryData.cat_id,
          is_vip: this.queryData.is_vip ? this.queryData.is_vip : undefined,
          is_strength: this.queryData.is_strength ? this.queryData.is_strength : undefined,
          is_verify: this.queryData.is_verify ? this.queryData.is_verify : undefined,
          province: this.queryData.province,
          city: this.queryData.city,
          district: this.queryData.district,
        })
      } else {
        this.$refs['company'].getCompanyList({
          cat_id: this.queryData.cat_id,
          is_vip: this.queryData.is_vip ? this.queryData.is_vip : undefined,
          is_strength: this.queryData.is_strength ? this.queryData.is_strength : undefined,
          is_verify: this.queryData.is_verify ? this.queryData.is_verify : undefined,
          province: this.queryData.province,
          city: this.queryData.city,
          district: this.queryData.district,
        })
      }
    },
    handleSizeChange(curSize) {
      this.page.size = curSize
    },
    handleCurrentChange(currentPage) {
      this.page.page = currentPage
    },
    selPage(page) {
      this.page.page = page
    },

    openArea() {
      this.closeArea = !this.closeArea
      if (this.closeArea) {
        this.areaList = [];
        for (let i = 0; i < 13; i++) {
          this.areaList.push(this.treeData[i])
        }
      } else {
        this.areaList = this.treeData;
      }
    }
  },
};
</script>

<style scoped lang="less">
.page {

  /deep/ .el-tabs {
    margin-top: 18px;
    background-color: #fff !important;
  }

  /deep/ .el-tabs__header {
    padding-left: calc((100% - 1400px) / 2) !important;
    margin: 0px !important;
    border-bottom: 2px solid #31A41B !important;

  }

  /deep/ .el-tabs__nav {
    border: 0px !important;
  }

  /deep/ .el-tabs__item {
    padding: 5px 55px 5px 55px !important;
    line-height: none !important;
    height: auto !important;
    border-radius: 4px 4px 0px 0px !important;
    font-family: PingFang SC, PingFang SC;
    font-weight: 600;
    font-size: 18px;
    color: #000;
    text-align: left;
    border: 0px !important;
  }

  /deep/ .is-active {
    background: #31A41B !important;
    color: #FFFFFF !important;

  }

  .content {
    height: auto;
    max-width: @engineerwidth;
    margin: 0 auto;

    .query-box {
      margin-top: 22px;

      .query-category {
        margin-left: 10px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 600;
        font-size: 16px;
        color: #31A41B;
        line-height: 40px;
        text-align: left;
      }

      .query-total {
        margin-left: 10px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 14px;
        color: #666666;
        line-height: 40px;
        text-align: left;

        .total {
          color: #31A41B;
        }
      }

      .query-area {
        width: 138px;
        padding: 6px 10px;
        margin-left: 20px;
        background: #FFFFFF;
        border-radius: 3px 3px 3px 3px;
        border: 1px solid #E6E6E6;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 14px;
        color: #666666;
        line-height: 0px;
        text-align: left;
        font-style: normal;

        .area {
          margin-left: 10px;
          font-family: PingFang SC, PingFang SC;
          font-weight: 600;
          font-size: 14px;
          color: #000000;
          line-height: 0px;
          text-align: left;
          font-style: normal;
        }

        .close-img {
          font-size: 16px;
          margin-left: 10px;
          font-weight: 600;
          color: #000000;
          cursor: pointer;
        }
      }

      .reset-btn {
        background: #FFFFFF;
        border-radius: 3px 3px 3px 3px;
        border: 1px solid #31A41B;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 14px;
        color: #31A41B;
        padding: 8px 18px;
        text-align: left;
        font-style: normal;
        margin-left: 8px;
      }
    }

    .table-box {
      width: 100%;
      margin-top: 20px;
      background-color: #fff;

      table,
      tr,
      td {
        border: 1px solid #E5E5E5;
        border-collapse: collapse;
      }

      .row {
        max-width: @engineerwidth;

        .title {
          width: 117px;
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 14px;
          color: #333333;
          text-align: center;
          font-style: normal;
          padding-top: 16px;
          padding-bottom: 16px;
        }

        .sel-content {
          flex: 1;
          padding: 0px 24px 14px 14px;
          display: flex;
          align-items: flex-start;
          justify-content: space-between;
          border: 0px;
        }

        .title1 {
          width: 117px;
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 14px;
          color: #000000;
          line-height: 0px;
          text-align: center;
          font-style: normal;
        }

        .sel-content1 {
          flex: 1;
          margin-left: 139px;
          padding: 16px 24px 14px 14px;
        }

        .sub-sel {
          margin-bottom: 16px;
          margin-left: 14px;
          margin-right: 24px;
          padding: 0px 24px 14px 14px;
          background: #F7F7F7;
          border-radius: 4px 4px 4px 4px;

          .category-item {
            margin-top: 14px !important;
          }
        }

        .category-list {
          display: flex;
          flex-wrap: wrap;
          flex: 1;
          cursor: pointer;

          .category-item {
            margin-top: 16px;
            margin-right: 16px;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 14px;
            color: #333333;
            text-align: left;
            font-style: normal;
            padding: 7px 10px;
          }

          .sel-item {
            color: #FFFFFF;
            background: #31A41B;
            border-radius: 3px 3px 3px 3px;
          }
        }

        .collapse {
          margin-top: 16px;
          margin-left: 16px;
          padding: 6px 10px;
          background: #FFFFFF;
          border-radius: 0px 0px 0px 0px;
          border: 1px solid #F0F0F0;
          cursor: pointer;

          .tips {
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 14px;
            color: #4D4D4D;
            text-align: left;
          }

          .down-arrow {
            margin-left: 5px;
            font-size: 16px;
          }
        }
      }
    }

    .check-group {
      margin-left: 139px;
    }

    // .pagination {
    //   max-width: @engineerwidth;
    //   margin: 21px 20px 0px 20px;
    //   padding-bottom: 41px;
    //   text-align: center;
    //   display: flex;
    //   align-items: center;
    //   justify-content: center;

    //   /deep/ .el-pagination .btn-next {
    //     padding-left: 13px !important;
    //     padding-right: 13px !important;
    //     background-color: #fff !important;
    //     font-family: PingFang-SC-Medium, PingFang-SC-Medium;
    //     font-weight: normal;
    //     font-size: 14px;
    //     color: #7A7A7A;
    //     font-style: normal;
    //   }
    //   /deep/ .el-pagination .btn-prev {
    //     padding-left: 13px !important;
    //     padding-right: 13px !important;
    //     background-color: #fff !important;
    //     font-family: PingFang-SC-Medium, PingFang-SC-Medium;
    //     font-weight: normal;
    //     font-size: 14px;
    //     color: #7A7A7A;
    //     font-style: normal;
    //   }
    //   /deep/  .el-pager li{
    //     background-color: #fff !important;
    //     border-radius: 4px 4px 4px 4px;
    //     font-family: PingFang-SC-Medium, PingFang-SC-Medium;
    //     font-weight: normal;
    //     font-size: 14px;
    //     color: #7A7A7A;
    //     font-style: normal;
    //   }

    //   /deep/ .el-pager li.active{
    //     background: #31A41B !important;
    //   }
    //   .btn-prev1,.btn-next1{

    //     padding:8px 13px !important;

    //     background-color: #fff !important;
    //     font-family: PingFang-SC-Medium, PingFang-SC-Medium;
    //     font-weight: normal;
    //     font-size: 14px;
    //     color: #7A7A7A;
    //     font-style: normal;
    //     border: 0px  !important;
    //   }
    // }
    .close {
      height: 49px;
      overflow: hidden;
    }

    .rotate180 {
      transform: rotate(180deg)
    }
  }

}

/* 覆盖 el-checkbox 的勾选颜色 */
::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: #31A41B !important;
  /* 青色 */
  border-color: #31A41B !important;
  /* 青色 */
}

::v-deep .el-checkbox__input.is-checked .el-checkbox__inner::after {
  border-color: #fff;
}

::v-deep .el-checkbox__input.is-checked+.el-checkbox__label {
  color: #31A41B !important;
  /* 青色 */
}
</style>
